<template>
  <view class="health-module" id="health-module">
    <view class="health-title">
      <view>综合健康值</view>
      <!-- <view>
        <image src="@/static/health/prompt.png" class="prompt-style"></image>
        <view class="dis">评分说明</view>
      </view> -->
    </view>

    <!-- 进度条 --评分 -->

    <view>
      <view
        class="health-content"
        v-for="(item, index) in healthList"
        :key="index"
      >
        <view class="health-content-title">{{ item.name }}</view>
        <u-line-progress
          :active-color="jugeHealth(item.value)"
          inactive-color="#EEFFFA"
          round="true"
          :striped="true"
          :show-percent="false"
          :striped-active="false"
          :style="{ flex: 1 }"
          :percent="item.percent * 100"
        ></u-line-progress>

        <view
          class="health-content-score"
          :style="{ color: jugeHealth(item.value) }"
          >{{ item.value }}分</view
        >
      </view>
    </view>

    <!-- 详细报告 -->
    <view class="health-title" style="margin-top: 60rpx; margin-bottom: 30rpx">
      <view>详细报告</view>
    </view>

    <u-grid :col="3" :border="false">
      <u-grid-item
        v-for="(item, index1) in detailReportList"
        :key="index1"
        @click="toReportDetail(item)"
      >
        <image :src="item.img" style="height: 80rpx; width: 80rpx"></image>
        <view class="grid-text text-style">{{ item.name }}</view>
      </u-grid-item>

      <u-grid-item @click="toHisData">
        <image
          src="https://s1.ax1x.com/2020/11/05/BWKgBR.png"
          style="height: 80rpx; width: 80rpx"
        ></image>
        <view class="grid-text text-style">历史数据</view>
      </u-grid-item>
    </u-grid>
  </view>
</template>

<script>
export default {
  props: {
    healthItem: {
      type: Array,
    },
    healthData: {
      type: Array,
    },
  },
  data() {
    return {
      healthList: [
        {
          name: "身体形态",
          value: 3,
          percent: 3 / 5,
        },
        {
          name: "动作技能",
          value: 4,
          percent: 4 / 5,
        },
        {
          name: "心肺功能",
          value: 3,
          percent: 3 / 5,
        },
        {
          name: "运动能力",
          value: 2,
          percent: 2 / 5,
        },
        {
          name: "营养健康",
          value: 5,
          percent: 5 / 5,
        },
      ],
      detailReportList: [
        [
          {
            name: "身体形态",
            img: "https://s1.ax1x.com/2020/11/05/BWKfN6.png",
          },
          {
            name: "动作技能",
            img: "https://s1.ax1x.com/2020/11/05/BWK0hT.png",
          },
          {
            name: "心肺功能",
            img: "https://s1.ax1x.com/2020/11/05/BWK2H1.png",
          },
        ],
        [
          {
            name: "运动能力",
            img: "https://s1.ax1x.com/2020/11/05/BWKoge.png",
          },
          {
            name: "营养健康",
            img: "https://s1.ax1x.com/2020/11/05/BWKsc4.png",
          },
          {
            name: "历史数据",
            img: "https://s1.ax1x.com/2020/11/05/BWKgBR.png",
          },
        ],
      ],
    };
  },
  watch: {
    healthItem: {
      handler(newV, oldV) {
        this.detailReportList = newV;
      },
      deep: true,
    },
    healthData: {
      handler(newV, oldV) {
        // 处理数据
        var data = [
          {
            name: "身体形态",
            value: newV[4],
            percent: newV[4] / 5,
          },
          {
            name: "动作技能",
            value: newV[0],
            percent: newV[0] / 5,
          },
          {
            name: "心肺功能",
            value: newV[1],
            percent: newV[1] / 5,
          },
          {
            name: "运动能力",
            value: newV[3],
            percent: newV[3] / 5,
          },
          {
            name: "营养健康",
            value: newV[2],
            percent: newV[2] / 5,
          },
        ];
        this.healthList = data;
      },
      deep: true,
    },
  },
  methods: {
    /**
     * 根据检测分数来判断 是否健康
     * 0-2分：红
     *2-3分：橙
     *3-5分：绿
     */
    jugeHealth(score) {
      if (parseInt(score) >= 0 && 2 >= parseInt(score)) {
        //不健康 为红色
        return "#F37373";
      } else if (parseInt(score) === 3) {
        //橙色
        return "#ff9900";
      } else {
        return "#07C38F";
      }
    },

    /**
     * 报告详情
     */
    toReportDetail(Info) {
      //注入数据
      this.healthList.map((v) => {
        if (v.name === Info.name) {
          Info.value = v.value;
        }
      });
      this.$u.route("/pages/report/report", Info);
    },
    /**
     * 历史数据
     */
    toHisData() {
      this.$u.route("/pages/historicalData/disData");
    },
  },
  onLoad(option) {},
};
</script>

<style scoped lang ='scss' >
.health-module {
  background-color: #ffffff;
  margin-top: 30rpx;
  border-radius: 20rpx;
  padding: 20rpx;
  .health-title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    & > view:nth-child(1) {
      color: #000000;
      font-size: 32rpx;
      font-weight: bold;
      font-family: SourceHanSansSC-Bold;
    }
    & > view:nth-child(2) {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .prompt-style {
        width: 24rpx;
        height: 24rpx;
        margin-right: 4rpx;
      }
      .dis {
        color: #333333;
        font-size: 24rpx;
        font-family: SourceHanSansSC-Regular;
        font-weight: Regular;
      }
    }
  }

  .health-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 30rpx 0;
    .health-content-title {
      width: 120rpx;
      color: #666666;
      font-size: 26rpx;
      font-weight: Regular;
      font-family: SourceHanSansSC-Regular;
      margin-right: 20rpx;
    }
    .health-content-score {
      width: 50rpx;
      font-size: 20rpx;
      margin-left: 20rpx;
      font-weight: Regular;
      font-family: SourceHanSansCN-Regular;
    }
  }

  .grid-text {
    font-size: 28rpx;
    margin-top: 4rpx;
    color: $u-type-info;
  }
  .text-style {
    color: #333333;
    font-size: 24rpx;
    margin-top: 12rpx;
    font-weight: Regular;
  }
}
</style>
